{include file="public/header" /}
<script src="__PIC__/js/jquery-2.1.1.min.js"></script>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
</script>
<link rel="stylesheet" href="__PIC__/css/common.css">
<link rel="stylesheet" href="__PIC__/css/map.css">
<body>
<div class="col-sm-12">
    <div class="layui-form layui-form-item">
        <div class="layui-col-md6 layui-input-inline" style="margin-top: 5px">
            <input type="text" class="layui-input search" name="keyword" value="{$keyword}" placeholder="资料名称"/>
        </div>
        <div class="layui-input-inline">
            <input type="text"  name="start" style="margin-top: 5px" value="{$start}" onclick="wk.lay_date2(this);" readonly class="layui-input search" placeholder="开始时间" />
        </div>
        <div class="layui-input-inline">
            <input type="text"  name="end" style="margin-top: 5px" value="{$end}" onclick="wk.lay_date2(this);" readonly class="layui-input search" placeholder="结束时间" />
        </div>
        <div class="layui-input-inline" style="margin-top: 5px">
            <button class="layui-btn" id="goSearch">立即搜索</button>
            <button  class="layui-btn layui-btn-normal" id="emptySearch">重置</button>
        </div>
    </div>
</div>
<div class="loading">
    <div class="loadbox">
        <img src="__PIC__/images/loading.gif">页面加载中...
    </div>
</div>
<div class="data">
    <div class="data-title" style="font-size: 16px;height: 100px;width: 100%;">
        <div class="title-center" style="font-size: 16px">
            <span style="color: #9AA9CF">文件提问次数：</span>{$dataQues}&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="color: #9AA9CF">医生与代表互动次数：</span>{$userTalk}
        </div>
        <!--<div class="title-center">文件数据</div>-->
    </div>
    <div class="data-content">
        <div class="con-center fl" style="width: 33.3%;padding: 0 5px">
            <div class="map-num">
                <p>浏览医生分布图</p>
                <div class="num">
                    {for start='0' end="$userNum|strlen"}
                    <span>{$userNum|substr=$i,1}</span>
                    {/for}
                </div>
            </div>
            <div class="cen-top map" id="map" style="margin-top: 30px"></div>
        </div>
        <div class="con-center fl" style="width: 33.3%;padding: 0 5px">
            <div class="map-num">
                <p>提问医生分布图</p>
                <div class="num">
                    {for start='0' end="$userNum2|strlen"}
                    <span>{$userNum2|substr=$i,1}</span>
                    {/for}
                </div>
            </div>
            <div class="cen-top map" id="map2" style="margin-top: 30px"></div>
        </div>
        <div class="con-center fl" style="width: 33.3%;padding: 0 5px">
            <div class="map-num">
                <p>企业代表分布图</p>
                <div class="num">
                    {for start='0' end="$userNum3|strlen"}
                    <span>{$userNum3|substr=$i,1}</span>
                    {/for}
                </div>
            </div>
            <div class="cen-top map" id="map3" style="margin-top: 30px"></div>
            <!--<div class="cen-bottom boxstyle" style="width: 100%;">-->
                <!--<div class="title">车辆充电高峰时间</div>-->
                <!--<div id="echarts_3" class="charts">12</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script src="__PIC__/js/echarts.min.js"></script>
<script src="__PIC__/js/china.js"></script>
<!--<script src="__PIC__/js/echarts.js"></script>-->
</html>
<script>
    $('#goSearch').on('click', function () {
        searchReload();
    });
    $('#emptySearch').on('click', function () {
        $('.search').val('');
        searchReload();
    });
    function searchReload() {
        var param = $('.layui-input').serialize();
        location.href = '/admin/Picture/cpdshow?' + param;
    }
</script>
<script>
    $(function () {
        map();
        map2();
        map3();
        function map() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            var data = {$userMapData};
            var geoCoordMap = {$userGeoCoordMap};
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name+'('+data[i].value+')',
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                // backgroundColor: '#404a59',
                /***  title: {
        text: '实时行驶车辆',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },**/
                // tooltip : {
                //     trigger: 'item'
                // },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#3eabff',
                            borderColor: 'gray'
                        },
                        emphasis: {
                            areaColor: '#006be4'
                        }
                    }
                },
                series : [
                    {
                        name: '医生分布',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return a.value - b.value;
                        }).slice(0, 50)),
                        // symbolSize: function (val) {
                        //     return val[2] / 20;
                        // },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFF',
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,.3)'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function map2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map2'));
            var data = {$userMapData2};
            var geoCoordMap = {$userGeoCoordMap2};
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name+'('+data[i].value+')',
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                // backgroundColor: '#404a59',
                /***  title: {
        text: '实时行驶车辆',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },**/
                // tooltip : {
                //     trigger: 'item'
                // },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#3eabff',
                            borderColor: 'gray'
                        },
                        emphasis: {
                            areaColor: '#006be4'
                        }
                    }
                },
                series : [
                    {
                        name: '医生分布',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return a.value - b.value;
                        }).slice(0, 50)),
                        // symbolSize: function (val) {
                        //     return val[2] / 20;
                        // },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFF',
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,.3)'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function map3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map3'));
            var data = {$userMapData3};
            var geoCoordMap = {$userGeoCoordMap3};
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name+'('+data[i].value+')',
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                // backgroundColor: '#404a59',
                /***  title: {
        text: '实时行驶车辆',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },**/
                // tooltip : {
                //     trigger: 'item'
                // },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#3eabff',
                            borderColor: 'gray'
                        },
                        emphasis: {
                            areaColor: '#006be4'
                        }
                    }
                },
                series : [
                    {
                        name: '医生分布',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return a.value - b.value;
                        }).slice(0, 50)),
                        // symbolSize: function (val) {
                        //     return val[2] / 20;
                        // },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFF',
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,.3)'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    })
</script>
